<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <style>
        label {
            display: inline-block;
            width: 80px;
            text-align: right;
        }

        form {
            position: absolute;
            right: 200px;
            top: 50%;
            transform: translateY(-50%);
            background-color: #f1f1f1;
            padding: 50px;
            border-radius: 10px;
        }

        form>div>input[type=text] {
            width: 250px;
            height: 25px;
            border: 1px solid gray;
            border-radius: 3px;
            text-indent: 3px;
        }

        div span {
            display: block;
            margin-left: 80px;
            font-size: 12px;
            height: 18px;
            padding-left: 5px;
            white-space: nowrap;
        }

        div .randCode {
            display: inline-block;
            margin-left: 0;
        }

        form>div {
            width: 400px;
        }

        form>div:nth-last-child(1) {
            text-align: center;
        }

        form>div:nth-last-child(1)>button {
            margin-right: 30px;
        }


        .right {
            color: green;
        }

        .err {
            color: red;
        }
    </style>
</head>

<body>
    <!-- onsubmit="return false"  阻止表单默认提交 -->
    <form action="" onsubmit="return false" autocomplete="off">
        <div>
            <label for="user">账号</label>
            <input id="user" type="text" placeholder="用户名/手机号/邮箱">
            <span class="user_span"></span>
        </div>
        <div>
            <label for="pwd">密码:</label>
            <input id="pwd" type="text">
            <span class="pwd_span"></span>
        </div>
        <div>
            <label for="pwd" style="vertical-align: middle;">
                <input id="rem" type="checkbox" name="" id="">
            </label>
            <i style="font-style: normal;">是否记住用户名?</i>
        </div>
        <div>
            <button id="logBtn">登录</button>
            <input type="reset">
        </div>
    </form>
</body>
<script>
    // 用户名  由数字,大小写字母,下划线,$ 组成  6-12位 且不能以数字开头
    // 密码    由数字,大小写字母,下划线 组成  6-12位 判断强中弱
    // 确认密码 
    // 手机号  1开头 11位
    // 邮箱    1272071492@qq.com


    var form = document.getElementsByTagName("form")[0];
    var pwdInp = document.getElementById("pwd");
    var randCode = document.getElementsByClassName("randCode")[0];
    var logBtn = document.getElementById("logBtn");

    var userInp = document.getElementById("user");
    var userSpan = document.getElementsByClassName("user_span")[0];

    var pwdInp = document.getElementById("pwd");
    var pwdSpan = document.getElementsByClassName("pwd_span")[0];


    var rem = document.getElementById("rem");

    // 账号登录验证
    // 用户输入的 账号,密码  和  后台输入的账号和密码做对比
    logBtn.onclick = function () {
        var account = userInp.value;
        var pwd = pwdInp.value;

        if (account && pwd) {  //同时输入用户名和密码

            $.ajax({
                type: "post",
                url: "../php/login.php",
                data: {
                    account,
                    pwd,
                },
                dataType: "json",
                success(data) {  // data  请求成功时调用的回调函数中传入的 数据
                    if (data.status) {
                        // 如果登录成功 存储cookie

                        // 如果选中  记31天
                        if (rem.checked) {
                            setCookie("logUser", data.user, 31);
                        } else {
                            setCookie("logUser", data.user);
                        }
                        var search = location.search;
                        if (search) {  // 如果存在  说明是从其他也跳转过来的 => 登录成功 回到对应页面
                            var returnUrl = decodeURIComponent(search.split("=")[1]);
                            location.href = returnUrl;
                        } else {  // 单纯的登录  => 跳转首页

                            location.href = "./index1.html";
                        }

                    } else {
                        alert(data.msg);
                    }
                }
            })

            // var xhr = new XMLHttpRequest();

            // xhr.open("post", "../php/login.php", true);

            // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            // xhr.send("account=" + account + "&pwd=" + pwd);

            // xhr.onreadystatechange = function () {
            //     if (xhr.readyState == 4 && xhr.status == 200) {
            //         console.log(xhr.responseText);
            //         var data = JSON.parse(xhr.responseText);

            //         console.log(data);
            // if (data.status) {
            //     // 如果登录成功 存储cookie

            //     // 如果选中  记31天
            //     if (rem.checked) {
            //         setCookie("logUser", data.user, 31);
            //     } else {
            //         setCookie("logUser", data.user);
            //     }

            //     location.href = "./index1.html";

            // } else {
            //     alert(data.msg);
            // }

            //     }
            // }

        }



    }


    // 可以  但是始终会遍历所有cookie 整理成对象
    // function getCookie(key) {
    //     var cookie = document.cookie;
    //     var obj = {};
    //     if (cookie) {
    //         var dataList = cookie.split("; ");
    //         for (var i = 0; i < dataList.length; i++) {
    //             var data = dataList[i];
    //             var name = data.split("=")[0];
    //             var val = data.split("=")[1];
    //             obj[name] = decodeURIComponent(val);
    //         }

    //     }
    //     // console.log(obj);
    //     return obj[key] ? obj[key] : "";

    // }


    // 简化
    function getCookie(key) {
        var cookie = document.cookie;
        if (cookie) {
            var dataList = cookie.split("; ");
            for (var i = 0; i < dataList.length; i++) {
                var data = dataList[i];
                var name = data.split("=")[0];
                var val = data.split("=")[1];

                // 循环过程中判断  如果name是我们要查找的键名(key) 直接返回
                if (key == name) {
                    return decodeURIComponent(val);
                }
            }

        }
        return "";

    }

</script>

</html>